<template>
  <div class="page-header-index-wide">
    <a-row :gutter="24" v-if="!historyData">
      <a-col :sm="24" :md="12" :xl="18" style="background:#eff1f4;">
        <!-- <a-card :loading="loading" :body-style="{padding: '0'}"> -->

        <!-- <span class="statistics-title">
            <span>上一站</span>
            <a-dropdown :trigger="['click']">
              <a class="ant-dropdown-link" @click="e => e.preventDefault()">
                {{downData}}
                <a-icon type="down" />
              </a>
              <a-menu slot="overlay">
                <a-menu-item>
                  <a href="javascript:;" @click="downItem($event)">1st menu item</a>
                </a-menu-item>
                <a-menu-item>
                  <a href="javascript:;" @click="downItem($event)">2nd menu item</a>
                </a-menu-item>
                <a-menu-item>
                  <a href="javascript:;" @click="downItem($event)">3rd menu item</a>
                </a-menu-item>
              </a-menu>
            </a-dropdown>
            <span>下一站</span>
          </span> -->
        <div class="statistics">
          <div class="statistics-title">
            <div class="statistics-lineName">{{boardData.lineName}} </div>
            <span :style="{background:boardData.clientConnections==0?'red':''}" class="platformName">
              {{boardData.platformName}}
            </span>
          </div>
          <div class="statistics-items">
            <div>
              <p class="title">站台侧数</p>
              <span>{{boardData.sideNum}}</span>
            </div>
            <div>
              <p class="title">DCU数</p>
              <span>{{boardData.sideDeviceNum}}</span>
            </div>
            <div>
              <p class="title">系统运行时长</p>
              <span>{{boardData.runningTime}}</span>
            </div>
            <div>
              <p class="title">当前报警设备数</p>
              <span>{{boardData.currentAlarmDeviceNum}}</span>
            </div>
            <div>
              <p class="title">累计报警次数</p>
              <span>{{boardData.totalAlarmNum}}次</span>
            </div>

            <div>
              <p class="title">健康度</p>
              <span>{{boardData.healthDegree}}</span>
            </div>

          </div>
        </div>
      </a-col>
      <a-col :sm="24" :md="12" :xl="6">
        <!-- <a-card :loading="loading" :bordered="false" :body-style="{padding: '0'}"> -->
        <!-- <a-tabs default-active-key="1" size="large">
            <a-tab-pane loading="true" tab="CPU占有率" key="1">
              <div>
                <dash-chart-demo title="占有率" :datasource="dashData[0]"></dash-chart-demo>

              </div>
            </a-tab-pane>
            <a-tab-pane tab="内存占有率" key="2">
              <div>
                <dash-chart-demo title="占有率" :datasource="dashData[0]"></dash-chart-demo>

              </div>
            </a-tab-pane>
          </a-tabs> -->
        <a-carousel autoplay arrows>
          <div slot="prevArrow" slot-scope="props" class="myBtn" style="left:10px;z-index: 1;">
            <a-icon type="left" style="color:#ccc" />
          </div>
          <div slot="nextArrow" slot-scope="props" class="myBtn" style="right: 10px;">
            <a-icon type="right" style="color:#ccc" />
          </div>
          <div>
            <div class="equTitle">当前CPU使用率</div>
            <echart-gauge title="" :data="utilizationRate.cpu"></echart-gauge>
          </div>
          <div>
            <div class="equTitle">当前内存使用率</div>
            <echart-gauge title="" :data="utilizationRate.memory"></echart-gauge>
          </div>
          <div>
            <div class="equTitle">当前硬盘使用率</div>
            <echart-gauge title="" :data="utilizationRate.disk||'1%'"></echart-gauge>
          </div>
        </a-carousel>
        <!-- </a-card> -->
      </a-col>
    </a-row>
    <div style="height: 20px;width: 110%; background-color: #eff1f4;margin: 0 -24px;overflow: hidden;" v-if="!historyData"></div>
    <div class="operation" v-if="!historyData">
      <div class="operation-title">
        <div class="title-left">
          <span class="title-text">设备实时运行情况</span>
          <!-- <span><i></i>健康</span> -->
          <span><i></i>亚健康</span>
          <span><i></i>正常</span>
          <span><i></i>报警</span>
          <span><i></i>故障</span>

          <span><i></i>通信正常</span>
          <span><i></i>通信故障</span>

          <span><i></i>信号有效</span>
          <span><i></i>信号无效</span>
        </div>
        <div class="title-right" @click="toHistoricalData">
          历史数据查询
        </div>
      </div>
      <div class="operation-cont">
        <div class="cont-top">
          <div class="upstream">上行</div>
          <ul>
            <li v-for="e in deviceUpData" :key="e.id">
              <span :class="[e.healthyStatus!=='健康'?'borderBlue':'',e.deviceStatus=='正常'?'bgGreen' : e.deviceStatus=='报警'?'bgRed':'bgOrange']"></span>
              <div :class="e.canStatus=='正常'?'borderGreen':'borderRed'" @click="showDetail(e.deviceCategory,e)">
                <p>{{(e.deviceCode).slice(0,3)}}</p>
                <p>{{(e.deviceCode).slice(3)}}</p>
              </div>
            </li>
          </ul>
        </div>

        <div class="cont-middle" v-if="deviceMiddleData.length>0">

          <div class="middle-left middle-item">
            <div class="up-down-text">
              电<br />源<br />系<br />统
            </div>
            <div class="power-warp">
              <div class="power-system">
                <span class="power-system-title" @click="toDeviceDetail(deviceMiddleData[0])">{{deviceMiddleData[0].deviceName}}</span>
                <span :class="['state', deviceMiddleData[0].deviceStatus !=='正常'?'bgRed':'']">{{deviceMiddleData[0].deviceStatus}}</span>
                <p class="warning">累计故障报警</p>
                <p class="warning-num">{{deviceMiddleData[0].totalFaultAlarmNum}} 次</p>
              </div>
              <div class="power-system">
                <span class="power-system-title" @click="toDeviceDetail(deviceMiddleData[1])">{{deviceMiddleData[1].deviceName}}</span>
                <span :class="['state', deviceMiddleData[1].deviceStatus !=='正常'?'bgRed':'']">{{deviceMiddleData[1].deviceStatus}}</span>
                <p class="warning">累计故障报警</p>
                <p class="warning-num">{{deviceMiddleData[1].totalFaultAlarmNum}} 次</p>
              </div>
            </div>
          </div>

          <div class="middle-right">
            <div class="middle-top middle-item" :style="{'border':watchUp=='0'?'1px solid #52c41a':'1px solid #f5222d'}">

              <div class="equipment">
                <span class="up-down-text">
                  上<br />行<br />侧
                </span>
                <ul>
                  <li>
                    <span class="power-system-title" @click="toDeviceDetail(deviceMiddleData[2])">{{deviceMiddleData[2].deviceName}}</span>
                    <span :class="['state', deviceMiddleData[2].deviceStatus !=='正常'?'bgRed':'']">{{deviceMiddleData[2].deviceStatus}}</span>
                    <p class="warning">累计故障报警</p>
                    <p class="warning-num">{{deviceMiddleData[2].totalFaultAlarmNum}} 次</p>
                  </li>
                  <li v-for="e in deviceMiddleData.filter((e,index)=>index > 2 && index%2==0)" :key="e.id">
                    <span class="power-system-title" @click="toDeviceDetail(e)">{{e.deviceName}}</span>
                    <p v-for="(e,i) in e.dataTypeList" :key="i">
                      <i :class="e.status == 1?'healthy':''"></i>{{e.dataTypeName}}
                    </p>
                  </li>

                </ul>
              </div>
            </div>

            <div class="middle-bottom middle-item" :style="{'border':watchDown=='0'?'1px solid #52c41a':'1px solid #f5222d'}">

              <div class="equipment">
                <span class="up-down-text">
                  下<br />行<br />侧
                </span>
                <ul>
                  <li>
                    <span class="power-system-title" @click="toDeviceDetail(deviceMiddleData[3])">{{deviceMiddleData[3].deviceName}}</span>
                    <span :class="['state', deviceMiddleData[3].deviceStatus !=='正常'?'bgRed':'']">{{deviceMiddleData[3].deviceStatus}}</span>
                    <p class="warning">累计故障报警</p>
                    <p class="warning-num">{{deviceMiddleData[3].totalFaultAlarmNum}} 次</p>
                  </li>
                  <li v-for="e in deviceMiddleData.filter((e,index)=>index > 3 && index%2==1)" :key="e.id">
                    <span class="power-system-title" @click="toDeviceDetail(e)">{{e.deviceName}}</span>
                    <p v-for="(e,i) in e.dataTypeList" :key="i">
                      <i :class="e.status == 1?'healthy':''"></i>{{e.dataTypeName}}
                    </p>
                  </li>

                </ul>
              </div>
            </div>
          </div>
        </div>

        <div class="cont-bottom">
          <div class="upstream">下行</div>
          <ul>
            <li v-for="e in deviceDownData" :key="e.id">
              <div :class="e.canStatus=='正常'?'borderGreen':'borderRed'" @click="showDetail(e.deviceCategory,e)">
                <p>{{(e.deviceCode).slice(0,3)}}</p>
                <p>{{(e.deviceCode).slice(3)}}</p>
              </div>
              <span :class="[e.healthyStatus!=='健康'?'borderBlue':'',e.deviceStatus=='正常'?'bgGreen' : e.deviceStatus=='报警'?'bgRed':'bgOrange']"></span>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div style="height: 20px;width: 110%; background-color: #eff1f4;margin: 0 -24px;overflow: hidden;" v-if="!historyData"></div>
    <a-card :loading="loading" :bordered="false" :body-style="{padding: '0'}" v-if="!historyData">
      <div class="salesCard" style="margin-bottom: 20px;">
        <a-tabs :default-active-key="defaultActive" @change="warningChange" size="large" :tab-bar-style="{marginBottom: '24px', paddingLeft: '16px'}">
          <a-tab-pane loading="true" tab="故障报警" key="1">
            <div v-if='faultAlarmList.length'>
              <!-- <a-carousel arrows :dots='false' autoplay>
                <div slot="prevArrow" slot-scope="props" class="warningBtn" style="left:10px;z-index: 1;">
                  <a-icon type="left" />
                </div>
                <div slot="nextArrow" slot-scope="props" class="warningBtn" style="right: 10px;">
                  <a-icon type="right" />
                </div>
                <div class="warning-warp" style="height: 100%;" v-for="(item,i) in faultAlarmList" :key="i">
                  <div class="warning-item" v-for="e in item" :key="e.id">
                    <div class="warning-title"> {{e.title}}</div>
                    <div class="content">
                      <p><span>报警级别：</span><span style="color: red;">{{e.alarmLevel}}</span></p>
                      <p><span>报警类型：</span><span>{{e.alarmCategory=='DEVICE_FAULT'?'设备报警':'部件报警'}}</span></p>
                      <p><span>故障类型：</span><span :title="e.faultType">{{e.faultType | ellipsis(18)}}</span></p>
                      <p><span>报警时间：</span><span :title="e.alarmTime">{{e.alarmTime | ellipsis(23)}}</span></p>
                      <div class="but">
                        <a-button @click="toFaultWarningDetail(e.id)">查看详情</a-button>
                        <a-button  @click='handleDone(1,e)' :type="e.status==0?'primary':''">{{e.status==0?'标记已处理':'已处理'}}</a-button>
                        <a-button type="danger" ghost @click="handleClose(1,e.id)">关闭</a-button>
                      </div>
                    </div>
                  </div>
                </div>
              </a-carousel> -->

              <div class="warning-warp" style="height: 100%;">
                <div class="warning-item" v-for="e in faultAlarmList" :key="e.id">
                  <div class="warning-title">{{e.alarmLocation=='DOWN'?'下行':'上行'}} {{e.deviceCode}}</div>
                  <div class="content">
                    <p><span>报警级别：</span><span style="color: red;">{{e.alarmLevel=='一级'?'故障':'报警'}}</span></p>
                    <!-- <p><span>报警类型：</span><span>{{e.alarmCategory=='DEVICE_FAULT'?'设备报警':'部件报警'}}</span></p> -->
                    <p><span>故障类型：</span><span :title="e.faultType">{{e.faultType | ellipsis(18)}}</span></p>
                    <p><span>报警时间：</span><span :title="e.alarmTime">{{e.alarmTime | ellipsis(23)}}</span></p>
                    <div class="but">
                      <a-button @click="toFaultWarningDetail(e.id)">查看详情</a-button>
                      <a-button @click='handleDone(1,e)' :type="e.status==1||e.alarmLevel=='二级'?'':'primary'">{{e.status==1||e.alarmLevel=='二级'?'已处理':'标记已处理'}}</a-button>
                      <a-button type="danger" ghost @click="handleClose(1,e.id)">关闭</a-button>
                    </div>
                  </div>
                </div>
              </div>

            </div>
            <a-empty v-else class="empty" />
          </a-tab-pane>
          <a-tab-pane tab="健康预警" key="2">
            <div v-if="healthyAlarmList.length">
              <div class="warning-warp">
                <div class="warning-item" v-for="e in healthyAlarmList" :key="e.id">
                  <div class="warning-title healthy">
                    {{e.alarmLocation=='DOWN'?'下行':'上行'}} {{e.deviceCode}}
                  </div>
                  <div class="content">
                    <p><span>预警级别：</span><span style="color: red;">{{e.alarmLevel=='一级'?'故障':'报警'}}</span></p>
                    <!-- <p><span>预警类型：</span><span>{{e.alarmCategory}}</span></p> -->
                    <p><span>故障类型：</span><span :title="e.faultType">{{e.faultType | ellipsis(18)}}</span></p>
                    <p><span>预警时间：</span><span :title="e.alarmTime">{{e.alarmTime | ellipsis(23)}}</span></p>
                    <div class="but">
                      <a-button @click="toHealthWarningDetail(e.id)">查看详情</a-button>
                      <a-button @click='handleDone(2,e)' :type="e.status==1||e.alarmLevel=='二级'?'':'primary'">{{e.status==1||e.alarmLevel=='二级'?'已处理':'标记已处理'}}</a-button>
                      <a-button type="danger" ghost @click="handleClose(2,e.id)">关闭</a-button>
                    </div>
                  </div>
                </div>
              </div>

            </div>
            <a-empty v-else class="empty" />
          </a-tab-pane>
        </a-tabs>
        <a-button type="info" style="float:right;margin:10px 20px;" @click="goToWarning()">{{defaultActive == '1' ? '查看全部报警':'查看全部预警'}}</a-button>
      </div>
    </a-card>
    <div style="height: 20px;width: 110%; background-color: #eff1f4;margin: 0 -24px;overflow: hidden;" v-if="!historyData"></div>

    <a-card :loading="loading" :bordered="false" :body-style="{padding: '0'}" v-if="!historyData">
      <div class="salesCard">
        <a-tabs :default-active-key="activeKey" size="large" :tab-bar-style="{marginBottom: '24px', paddingLeft: '16px'}" @change="tabChange">
          <div class="extra-wrapper" slot="tabBarExtraContent">
            <div class="extra-item">
              <!-- <a>今日</a>
              <a>本周</a>
              <a>本月</a>
              <a>本年</a> -->
            </div>
            <!-- <a-range-picker v-model="searchYear" @change="dateChange" valueFormat="YYYY-MM-DD 00:00:00" :style="{width: '256px'}" /> -->
            <span>选择年份：</span>
            <a-date-picker mode="year" placeholder="请选择年份" :disabled-date='disabledEndDate' format='YYYY' v-model="searchYear" style="width:180px;margin-right:10px" :open='yearShowOne'
              @openChange="openChangeOne" @panelChange="panelChangeOne" />
            <a-button type="primary" icon="search" @click="queryFaultStatistics()">查询</a-button>
            <a-button type="primary" icon="sync" ghost style="margin-left:8px;" @click="searchYear=null">重置</a-button>
          </div>
          <a-tab-pane loading="true" tab="报警统计" key="DEVICE_FAULT"></a-tab-pane>
          <!-- <a-tab-pane loading="true" tab="所有部件" key="PARTS_FAULT"></a-tab-pane> -->
        </a-tabs>
        <a-spin :spinning="rankLoading" tip="数据加载中">
          <a-row>
            <a-col :xl="16" :lg="12" :md="12" :sm="24" :xs="24">
              <bar :title="activeKey=='DEVICE_FAULT'?'月度报警趋势':'月度故障趋势'" :height='620' :dataSource="barData" />
            </a-col>
            <a-col :xl="8" :lg="12" :md="12" :sm="24" :xs="24">
              <rank-list :title="activeKey=='DEVICE_FAULT'?'设备报警排名':'部件故障排名'" :height='570' :list="rankList" />
            </a-col>
          </a-row>
        </a-spin>
      </div>
    </a-card>

    <historical-data v-if="historyData" @historyHide="historyHide"></historical-data>
    <full-height-gate ref="full" @clearId="fullId=''" :fullId="fullId"></full-height-gate>
    <half-high-gate ref="half" @clearId="halfId=''" :halfId="halfId"></half-high-gate>

  </div>
</template>

<script>
import moment from 'moment'
import ChartCard from '@/components/ChartCard'
import ACol from "ant-design-vue/es/grid/Col"
// import ATooltip from "ant-design-vue/es/tooltip/Tooltip"
// import MiniArea from '@/components/chart/MiniArea'
// import MiniBar from '@/components/chart/MiniBar'
// import MiniProgress from '@/components/chart/MiniProgress'
import RankList from '@/components/chart/RankList'
import Bar from '@/components/chart/Bar'
// import LineChartMultid from '@/components/chart/LineChartMultid'
// import HeadInfo from '@/components/tools/HeadInfo.vue'
// import DashChartDemo from '@/components/chart/DashChartDemo'
// import Trend from '@/components/Trend'
import { getLoginfo, getVisitInfo } from '@/api/api'
import { postAction, getAction } from '@/api/manage'

import EchartGauge from './EchartGauge.vue'
import FullHeightGate from "./FullHeightGate.vue"
import HalfHighGate from './HalfHighGate.vue'
import HistoricalData from './HistoricalData.vue'

const rankList = []
// for (let i = 0; i < 7; i++) {
//   rankList.push({
//     name: '白鹭岛 ' + (i + 1) + ' 号店',
//     total: 1234.56 - i * 100
//   })
// }
const barData = []
// for (let i = 0; i < 12; i += 1) {
//   barData.push({
//     x: `${i + 1}月`,
//     y: Math.floor(Math.random() * 1000) + 200
//   })
// }
export default {
  name: "IndexChart",
  components: {
    // ATooltip,
    ACol,
    // ChartCard,
    // MiniArea,
    // MiniBar,
    // MiniProgress,
    RankList,
    Bar,
    // Trend,
    // LineChartMultid,
    // HeadInfo,
    // DashChartDemo,
    EchartGauge,
    FullHeightGate,
    HalfHighGate,
    HistoricalData
  },
  data() {
    return {
      form: {},
      loading: true,
      center: null,
      rankList,
      barData,
      dashData: 7,
      loginfo: {},
      visitFields: ['ip', 'visit'],
      visitInfo: [],
      indicator: <a-icon type="loading" style="font-size: 24px" spin />,
      downData: '111111',

      utilizationRate: {},//使用率
      historyData: false,
      boardData: {},//看板数据
      deviceUpData: [],// 设备上行数据
      deviceMiddleData: [],// 设备上行数据
      deviceDownData: [],// 设备上行数据
      faultAlarmList: [],//故障报警信息
      healthyAlarmList: [], //健康预警信息
      halfId: '',
      fullId: '',
      searchYear: null || moment().format('YYYY'),
      activeKey: 'DEVICE_FAULT',
      timers: null,
      defaultActive: '1',

      yearShowOne: false,
      rankLoading: false,
      watchUp:'',
      watchDown:''
    }
  },
  filters: {
    ellipsis(val, len) {
      const lens = len || 8;
      if (!val) return "无数据";
      if (val.length > lens) {
        return val.slice(0, lens) + " ...";
      }
      return val;
    },
  },
  created() {
    setTimeout(() => {
      this.loading = !this.loading
    }, 1000)
    this.initLogInfo();
    this.getHardware()
    this.queryDataBoard()
    this.queryFaultStatistics()
    this.timers = setInterval(() => {
      setTimeout(() => {
        this.getHardware()
        this.queryDataBoard()
      }, 0);
    }, 300)
    this.$EventBus.$on('showDetail', (type,e)=>{
      this.showDetail(type,e)
    })
  },
  beforeDestroy() {
    this.$EventBus.$off('showDetail')
    clearInterval(this.timers)
    this.timers = null
  },
  beforeRouteLeave(to, from, next) {
    clearInterval(this.timers)
    this.timers = null
    next()
  },
  methods: {
    initLogInfo() {
      getLoginfo(null).then((res) => {
        if (res.success) {
          Object.keys(res.result).forEach(key => {
            res.result[key] = res.result[key] + ""
          })
          this.loginfo = res.result;
        }
      })
      getVisitInfo().then(res => {
        if (res.success) {
          this.visitInfo = res.result;
        }
      })
    },
    disabledEndDate(endValue) {
      return endValue.valueOf() > moment().valueOf();
    },
    downItem(e) {
      console.log('e.target.inntHTM :>> ', e.target.innerHTML);
      this.downData = e.target.innerHTML
    },
    //历史数据查询
    toHistoricalData() {
      this.$router.push('/statistics/history')
    },
    historyHide() {
      this.historyData = false
    },
    handleDone(flag, row) {
      if (row.status == 1 ||row.alarmLevel=='二级') return
      // 1 故障报警处理 2 健康预警处理
      let url = flag == 1 ? '/fault/gdDeviceFaultAlarm/faultAlarmHandling' : '/healthy/gdDeviceHealthyAlarm/healthyAlarmHandling'
      getAction(url, { id: row.id }).then(res => {
        if (res && res.code == 200) {
          this.$message.success(res.message)
        }
      })
    },
    // 部件详情
    showDetail(type, {id,deviceCode}=data) {
      if(deviceCode&&deviceCode.includes('MSD')) this.toDeviceDetail({id,deviceCode})

      this.halfId = ''
      this.fullId = ''
      if (type == "HALF_HEIGHT") {
        this.$refs.half.visible = true;
        this.halfId = id

        // this.$refs.full.visible = true;
        // this.fullId = id

      } else if (type == "FULL_HEIGHT") {
        this.$refs.full.visible = true;
        this.fullId = id
        // this.$refs.half.visible = true;
        // this.halfId = id          
      }
    },
    bigNumberTransform(value) {
      const newValue = ['', '', '']
      let fr = 1000
      let num = 3
      let text1 = ''
      let fm = 1
      while (value / fr >= 1) {
        fr *= 10
        num += 1
        // console.log('数字', value / fr, 'num:', num)
      }
      if (num <= 4) { // 千
        newValue[0] = parseInt(value / 1000) + ''
        newValue[1] = '千'
      } else if (num <= 8) { // 万
        text1 = parseInt(num - 4) / 3 > 1 ? '千万' : '万'
        // tslint:disable-next-line:no-shadowed-variable
        fm = text1 === '万' ? 10000 : 10000000
        if (value % fm === 0) {
          newValue[0] = parseInt(value / fm) + ''
        } else {
          newValue[0] = parseFloat(value / fm).toFixed(1) + ''
        }
        newValue[1] = text1
      } else if (num <= 16) { // 亿
        text1 = (num - 8) / 3 > 1 ? '千亿' : '亿'
        text1 = (num - 8) / 4 > 1 ? '万亿' : text1
        text1 = (num - 8) / 7 > 1 ? '千万亿' : text1
        // tslint:disable-next-line:no-shadowed-variable
        fm = 1
        if (text1 === '亿') {
          fm = 100000000
        } else if (text1 === '千亿') {
          fm = 100000000000
        } else if (text1 === '万亿') {
          fm = 1000000000000
        } else if (text1 === '千万亿') {
          fm = 1000000000000000
        }
        if (value % fm === 0) {
          newValue[0] = parseInt(value / fm) + ''
        } else {
          newValue[0] = parseFloat(value / fm).toFixed(2) + ''
        }
        newValue[1] = text1
      }
      if (value < 1000) {
        newValue[0] = value + ''
        newValue[1] = ''
      }
      return newValue.join('')
    },
    //     CPU使用率
    getHardware() {
      getAction('/statistics/hardwareInfo', {}).then(res => {
        console.log('res :>> ', res.result);
        if (res && res.code == 200) {
          this.utilizationRate = res.result
        }
      })
    },
    //  
    changArr(arr, cutLen) {
      let newArr = []
      for (let i = 0; i < arr.length; i + cutLen) {
        newArr.push(arr.slice(i, i += cutLen))
      }
      return newArr
    },
    //  看板数据 ===>>>> 基础信息 设备实时运行情况 故障报警 健康预警
    queryDataBoard() {
      getAction('/statistics/queryDataBoard', {}).then(res => {
        if (res && res.code == 200) {
          // console.log('看板数据==》',res.result)
          sessionStorage.setItem('lineName', res.result.lineName)

          this.boardData = res.result
          // console.log('设备信息==》',res.result.deviceList)
          let deviceList = res.result.deviceList
          this.deviceUpData = deviceList.filter(e => e.deviceLocation == 'UP' && e.deviceCode.includes('PSD'))
          this.deviceDownData = deviceList.filter(e => e.deviceLocation == 'DOWN' && e.deviceCode.includes('PSD')).reverse()

          this.deviceMiddleData = deviceList.filter(e => !e.deviceCode.includes('PSD')&&!e.deviceCode.includes('SYS')&&!e.deviceCode.includes('MSD'))

          // 上行 首尾 MSD
          let pedUp = deviceList.filter(e=>e.deviceLocation == 'UP' && e.deviceCode.includes('MSD'))
          pedUp[0].deviceStatus = pedUp[0].dataTypeList[0].status== 0? '正常':'报警'
          pedUp[1].deviceStatus = pedUp[1].dataTypeList[0].status== 0? '正常':'报警'
          pedUp[0].canStatus = this.deviceUpData[0].canStatus
          pedUp[1].canStatus = this.deviceUpData.slice(-1)[0].canStatus
          this.deviceUpData.unshift(pedUp[0])
          this.deviceUpData.push(pedUp[1])

          // 下行 首尾 MSD
          let pedDown = deviceList.filter(e=>e.deviceLocation == 'DOWN' && e.deviceCode.includes('MSD'))
          pedDown[0].deviceStatus = pedDown[0].dataTypeList[0].status== 0? '正常':'报警'
          pedDown[1].deviceStatus = pedDown[1].dataTypeList[0].status== 0? '正常':'报警'
          pedDown[0].canStatus = this.deviceDownData[0].canStatus
          pedDown[1].canStatus = this.deviceDownData.slice(-1)[0].canStatus
          this.deviceDownData.push(pedDown[0])
          this.deviceDownData.unshift(pedDown[1])


          console.log('this.deviceUpData==>>>', this.deviceUpData)
          console.log('this.deviceDownData==>>>', this.deviceDownData)
          console.log('this.deviceMiddleData==>>>', this.deviceMiddleData)

          //  deviceStatus 正常 报警 故障 
          //  healthyStatus 健康 亚健康 
          // this.deviceUpData[0].deviceStatus ='正常'
          // this.deviceUpData[0].healthyStatus ='健康'
          // this.deviceUpData[0].canStatus ='正常'

          // this.deviceUpData[1].deviceStatus ='正常'
          // this.deviceUpData[1].healthyStatus ='亚健康'

          // this.deviceUpData[2].deviceStatus ='报警'
          // this.deviceUpData[2].healthyStatus ='健康'   

          // this.deviceUpData[3].deviceStatus ='报警'
          // this.deviceUpData[3].healthyStatus ='亚健康'   
          
          // this.deviceUpData[4].deviceStatus ='故障'
          // this.deviceUpData[4].healthyStatus ='健康'          

          // this.deviceUpData[5].deviceStatus ='故障'
          // this.deviceUpData[5].healthyStatus ='亚健康' 

          this.watchUp = res.result.watchUp
          this.watchDown = res.result.watchDown

          // let fList = res.result.faultAlarmList
          // this.faultAlarmList = this.changArr(fList,5)
          this.faultAlarmList = res.result.faultAlarmList

          console.log('处理完成后 故障报警信息==》', this.faultAlarmList)

          // let hList = res.result.healthyAlarmList
          // this.healthyAlarmList = this.changArr(hList,5)
          this.healthyAlarmList = res.result.healthyAlarmList

          console.log('处理完成后 健康预警信息==》', this.healthyAlarmList)

        }
      })
    },
    warningChange(key) {
      this.defaultActive = key
    },
    goToWarning() {
      if (this.defaultActive == '1') {
        this.$router.push('/fault/faultWarningList')
      } else {
        this.$router.push('/prediction/healthWarning')
      }
    },
    tabChange(key) {
      this.activeKey = key
      !this.searchYear && (this.searchYear = moment().format('YYYY'))
      this.queryFaultStatistics()
    },
    dateChange(date, dateString) {
      console.log(dateString);
      this.queryFaultStatistics()
    },
    openChangeOne(status) {
      if (status) {
        this.yearShowOne = true
      } else {
        this.yearShowOne = false
      }
    },
    panelChangeOne(value) {
      this.searchYear = moment(value).format('YYYY')
      this.yearShowOne = false
      this.queryFaultStatistics()
    },
    queryFaultStatistics(key) {
      this.rankLoading = true
      this.barData = []
      this.rankList = []
      let parma = {
        'alarmCategory': this.activeKey,
        'startYear': this.searchYear,
        'endYear': this.searchYear
      }
      getAction('/fault/gdDeviceFaultAlarm/queryFaultStatistics', parma).then(res => {
        if (res && res.code == 200) {

          let rankingMap = res.result.rankingMap
          let faultValueMap = res.result.faultValueMap
          for (let k in rankingMap) {
            this.rankList.push({ name: k, total: rankingMap[k] })
          }
          for (let k in faultValueMap) {
            this.barData.push({ x: k, y: faultValueMap[k] })
          }
          // console.log("faultValueMap==>>>", faultValueMap)
          // console.log("rankingMap==>>>", rankingMap)
          this.rankLoading = false

        } else {
          this.$message.warning(res.message)
        }
      })
    },
    toDeviceDetail(data) {
      console.log(data)
      this.$router.push({ path: '/equipment/equipmentList/detail', query: { type: data.deviceCode, id: data.id,isHome:true} })
    },
    toFaultWarningDetail(id) {
      this.$router.push({ path: '/fault/faultWarningList/Detail', query: { id } })
    },
    toHealthWarningDetail(id) {
      this.$router.push({ path: '/health/healthWarningList/Detail', query: { id } })

    },
    handleClose(flag, id) {
      let url = flag == 1 ? '/fault/gdDeviceFaultAlarm/faultAlarmClose' : '/healthy/gdDeviceHealthyAlarm/healthyAlarmClose'
      let req = {
        id,
        showStatus: 0
      }
      getAction(url, req).then(res => {
        console.log(res)
        if (res && res.code == 200) {
          this.$message.success('关闭成功')
        }
      })
    },

  }
}
</script>

<style lang="less" scoped>
/* .ant-card{
    background-color: #ccc !important;
  } */
ul {
  padding: 0;

  li {
    list-style: none;
  }
}

.ant-carousel {
  background: #fff;
}

.circle-cust {
  position: relative;
  top: 28px;
  left: -100%;
}

.extra-wrapper {
  line-height: 55px;
  padding-right: 24px;
  .extra-item {
    display: inline-block;
    margin-right: 24px;

    a {
      margin-left: 24px;
    }
  }
}

/* 首页访问量统计 */
.head-info {
  position: relative;
  text-align: left;
  padding: 0 32px 0 0;
  min-width: 125px;

  &.center {
    text-align: center;
    padding: 0 32px;
  }

  span {
    color: rgba(0, 0, 0, 0.45);
    display: inline-block;
    font-size: 0.95rem;
    line-height: 42px;
    margin-bottom: 4px;
  }

  p {
    line-height: 42px;
    margin: 0;

    a {
      font-weight: 600;
      font-size: 1rem;
    }
  }
}

.statistics {
  // padding: 0px 20px;
  background-color: #fff;
  height: 100%;

  /* display: flex;
    justify-content: space-around; */
  .statistics-title {
    height: 44px;
    line-height: 44px;
    text-align: center;
    font-size: 16px;
    font-weight: 900;
    border-bottom: 1px solid #ccc;
    color: rgba(0, 0, 0, 0.8);
    position: relative;
    .statistics-lineName {
      position: absolute;
      left: 10px;
    }
  }

  .statistics-items {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    // padding-top: 30px;

    div {
      width: 30%;
      margin-top: 23px;
      margin-bottom: 50px;
      text-align: center;
    }
    .title {
      color: rgba(0, 0, 0, 0.5);
      margin-bottom: 0;
    }
    span {
      font-size: 24px;
      font-weight: 700;
      // color: deepskyblue;
    }
  }
}

.operation {
  width: 100%;
  background-color: #fff;
  // margin-top: 20px;

  .operation-title {
    display: flex;
    justify-content: space-between;
    height: 44px;
    line-height: 44px;
    border-bottom: 1px solid #ccc;

    .title-left {
      vertical-align: middle;

      span {
        display: inline-block;
        margin-left: 20px;
        i {
          display: inline-block;
          vertical-align: middle;
          width: 40px;
          height: 8px;
          margin-right: 6px;
          transform: translateY(-3px);
          background-color: #d7d7d7;
        }
      }
      span:nth-child(2) {
        i {
          background-color: transparent;
          border: 1px solid blue;

        }
      }

      span:nth-child(3) {
        i {
          background-color: #52c41a;
          // border: 1px solid #52c41a;
        }
      }

      span:nth-child(4) {
        i {
          background-color: #f5222d;
          // border: 1px solid #f5222d;
        }
      }
      span:nth-child(5) {
        i {
          background-color: #e8b73a;
          // border: 1px solid #e8b73a;
        }
      }
      span:nth-child(6) {
        i {
          width: 20px;
          height: 20px;
          background-color: transparent;
          border: 1px solid #52c41a;
        }
      }

      span:nth-child(7) {
        i {
          width: 20px;
          height: 20px;
          background-color: transparent;
          border: 1px solid #f5222d;
        }
      }
      span:nth-child(8) {
        i {
          width: 10px;
          height: 10px;
          border-radius: 50%;
          background-color: #52c41a;
        }
      }

      span:nth-child(9) {
        i {
          width: 10px;
          height: 10px;
          border-radius: 50%;
          background-color: #d7d7d7;
        }
      }
      .title-text {
        font-size: 16px;
        font-weight: 700;
        color: rgba(0, 0, 0, 0.8);
      }
    }

    .title-right {
      padding-right: 20px;
      font-size: 14px;
      color: darkturquoise;
      cursor: pointer;
    }
  }

  .operation-cont {
    width: 100%;
    padding: 0 20px 40px 20px;
    background-color: #fff;
    margin-top: 40px;

    .cont-top {
      padding: 30px 10px 10px 10px;
      position: relative;
      border: 1px solid #ccc;
      text-align: center;

      .upstream {
        font-size: 14px;
        width: 100px;
        font-weight: 800;
        position: absolute;
        top: -12px;
        left: calc(50% - 90px);
        background: #fff;
      }

      ul {
        width: 100%;
        overflow: auto;
        display: flex;
        padding-bottom: 20px;
        justify-content: space-between;

        li {
          margin: 0 2px;

          span {
            display: block;
            height: 8px;
            margin-bottom: 10px;
          }



          div {
            padding: 10px 14px;
            border: 2px solid #52c41a;
            background: #d7d7d7;
            cursor: pointer;

            p {
              margin: 0;
              padding: 0;
            }
          }

          div.unhealthy {
            border: 2px solid #f5222d;
          }
        }
      }
    }

    .cont-middle {
      margin: 20px 0;
      text-align: center;
      display: flex;
      justify-content: space-between;
      .middle-left {
        width: 20%;
        display: flex;
        justify-content: space-around;
        align-items: center;
        border: 1px solid #ccc;
        .power-warp{
          height: 100%;
          width: 70%;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
        }
      }
      .middle-right {
        width: 78%;
        display: flex;
        flex-direction: column;
        // border: 2px #ccc solid;
      }

      .middle-item {
        display: flex;
        .power-system {
          border: 1px solid #ccc;
          // border-radius: 10px;
          padding: 15px;
          margin: 10px 0;
          width: 100%;

          .power-system-title {
            font-size: 14px;
            font-weight: 700;
            color: rgba(0, 0, 0, 0.8);
            &:hover {
              cursor: pointer;
            }
          }

          .state {
            margin: 20px auto;
            padding: 5px 0;
            display: block;
            width: 120px;
            font-size: 14px;
            background-color: #52c41a;
            border-radius: 6px;
            color: #fff;
          }

          .warning {
            padding: 0;
            margin: 0;
            font-size: 14px;
            color: rgba(0, 0, 0, 0.45);
          }

          .warning-num {
            padding: 0;
            margin: 0;
            font-size: 16px;
            color: #000;
          }
        }
        .up-down-text {
            display: inline-block;
            width: 4%;
            transform: translateX(10px);
            color: rgba(0, 0, 0, 0.8);
            font-weight: 800;
          }
        .equipment {
          width: 100%;
          // border: 1px solid #ccc;
          display: flex;
          align-items: center;



          ul {
            margin: 0;
            padding: 0 10px;
            display: flex;
            width: 100%;
            justify-content: space-between;

            li {
              border: 1px solid #ccc;
              border-right: transparent;
              padding: 15px;
              margin: 10px 0;
              width:calc(100% / 4);
              &:last-child{
                border-right:1px solid #ccc;
              }
              .power-system-title {
                font-size: 14px;
                font-weight: 700;
                display: block;
                margin-bottom: 10px;
                color: rgba(0, 0, 0, 0.8);

                &:hover {
                  cursor: pointer;
                }
              }

              .state {
                margin: 20px auto;
                padding: 5px 0;
                display: block;
                width: 120px;
                font-size: 14px;
                background-color: #52c41a;
                border-radius: 6px;
                color: #fff;
              }

              .warning {
                padding: 0;
                margin: 0;
                font-size: 14px;
                color: rgba(0, 0, 0, 0.45);
                text-align: center;
              }

              .warning-num {
                padding: 0;
                margin: 0;
                font-size: 16px;
                color: #000;
                text-align: center;
              }

              p {
                margin: 0;
                // margin-bottom: 6px;
                text-align: left;
                padding-left: 30%;

                i {
                  display: inline-block;
                  width: 8px;
                  height: 8px;
                  border-radius: 50%;
                  background-color: #d7d7d7;
                  margin-right: 4px;

                  &.unhealthy {
                    background-color: #f5222d;
                  }

                  &.healthy {
                    background-color: #52c41a;
                  }
                }
              }
            }
          }
        }
      }

      .middle-bottom {
        margin-top: 20px;
      }
    }

    .cont-bottom {
      padding: 30px 10px 10px 10px;
      position: relative;
      border: 1px solid #ccc;
      text-align: center;

      .upstream {
        font-size: 14px;
        width: 100px;
        font-weight: 800;
        position: absolute;
        bottom: -12px;
        left: calc(50% - 90px);
        background: #fff;
      }

      ul {
        width: 100%;
        overflow: auto;
        display: flex;
        padding-bottom: 20px;
        justify-content: space-between;

        li {
          margin: 0 2px;
          span {
            display: block;
            height: 8px;
            // background: #d7d7d7;
            margin-top: 10px;
          }


          div {
            padding: 10px 14px;
            border: 2px solid #52c41a;
            background: #d7d7d7;
            cursor: pointer;
            p {
              margin: 0;
              padding: 0;
            }
          }

          div.unhealthy {
            border: 2px solid #f5222d;
          }
        }
      }
    }
  }
}
.bgRed {
  background-color: #f5222d !important;
}
.borderBlue {
  border:1px solid blue !important;
}
.borderRed {
  border:2px solid #f5222d !important;
}
.borderGreen {
  border:2px solid #52c41a !important;
}
.bgGreen {
  background: #52c41a !important;
}
.bgOrange {
  background: #e8b73a !important;
}

</style>
<style scoped>
.ant-carousel >>> .slick-slide {
  /* text-align: center; */
  /* height: 160px;
  line-height: 160px; */
  /* background: #364d79; */
  overflow: hidden;
}

.ant-carousel >>> .custom-slick-arrow {
  width: 25px;
  height: 25px;
  color: #000;
  background-color: rgba(31, 45, 61, 0.11);
  opacity: 0.3;
  /* z-index: 2; */
}

/* .ant-carousel >>> .custom-slick-arrow:before {
  display: none;
}
.ant-carousel >>> .custom-slick-arrow:hover {
  opacity: 0.5;
} */
.anticon.anticon-double-left,
.anticon.anticon-double-right {
  width: 100%;
  height: 100%;
}

.ant-carousel >>> .anticon svg {
  width: 100%;
  height: 100%;
}

.ant-carousel >>> .slick-slide h3 {
  color: #fff;
}

.ant-carousel >>> .ant-form-item {
  margin-bottom: 0;
}
.warning-warp {
  display: flex;
}
.warning-item {
  background-color: #f1f4fe;
  display: inline-block;
  border-radius: 5px;
  width: calc(20% - 20px);
  margin: 10px;
}

.warning-item .content {
  padding: 10px;
}
.warning-item .content .name {
  /* width: calc(90% - 70px); */
  /* height: 23px; */
  /* border: 1px solid red; */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.warning-title {
  border-radius: 5px 5px 0 0;
  background-color: red;
  color: #fff;
  text-align: left;
  padding: 14px 10px;
}

.healthy.warning-title {
  background-color: #e8b73a;
}

.warn_val {
  text-align: left;
  padding-left: 20px;
}

.but {
  display: flex;
  justify-content: space-around;
  margin-top: 14px;
}

.healthy-type {
  color: #e8b73a;
}

.ant-card .ant-card-body {
  padding: 0 !important;
}

.report {
  width: 100%;
}

.report-header {
  display: flex;
  justify-content: space-between;
  /* background-color: red; */
  height: 50px;
  line-height: 50px;
}

.report-text {
  font-size: 16px;
  font-weight: bold;
  color: #000;
}

.report-date {
  font-size: 12px;
  color: #333;
}

.report-date i {
  color: #666;
}

.report-items {
  /* display: flex; */
}

.report-item {
  width: 25%;
  height: 200px;
  border: 1px solid #ccc;
  border-left: none;
  border-top: none;
  padding: 20px 15px;
  float: left;
}

.report-item:nth-child(5n),
.report-item:first-child {
  border-left: 1px solid #ccc;
}

.report-item:nth-child(-n + 4) {
  border-top: 1px solid #ccc;
}

.report-item-title {
  text-align: center;
  color: #000;
  font-size: 14px;
  font-weight: bold;
}

.see {
  float: right;
  color: dodgerblue;
  cursor: pointer;
}

.report-item p {
  margin: 0;
  margin-top: 10px;
}
.equTitle {
  text-align: center;
  height: 44px;
  line-height: 44px;
  font-size: 16px;
  font-weight: 800;
  color: rgba(0, 0, 0, 0.8);
  border-bottom: 1px solid #ccc;
}
.ant-carousel >>> .myBtn {
  top: 15px;
  width: 30px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  font-size: 20px;
  font-weight: 700;
  color: #000;
  background: #fff;
}
.ant-carousel >>> .myBtn:before {
  display: none;
}

.ant-carousel >>> .warningBtn {
  top: 120px;
  width: 30px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  font-size: 20px;
  font-weight: 700;
  color: #ccc;
  background: transparent;
}
.ant-carousel >>> .warningBtn:before {
  display: none;
}
.empty {
  height: 226px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.platformName{
  font-size: 20px;
  padding: 5px;
}
</style>